<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>首页</title>
	</head>
	<body>
		<!-- 主体内容 -->
		<main>
			<!-- 头部banner区 -->
			<div id="header">
				<div class="swiper mySwiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="../../assets/images/7.png" alt="图片加载失败" />
						</div>
						<div class="swiper-slide">
							<img src="../../assets/images/8.png" alt="图片加载失败" />
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<!-- 排名打卡区 -->
			<section id="rc">
				<!-- 排名 -->
				<div class="ranking">
					<!-- 小标题 -->
					<span class="title1">今日排名</span> <br />
					<!-- 奖杯图标 -->
					<span class="iconfont icon-jiangbei"></span>
					<!-- 名次 -->
					<span class="rankNum"></span>
				</div>
				<!-- 打卡 -->
				<div class="clockIn">
					<span class="title2">累计打卡 <span id="clockNum"></span> 天</span>
					<br />
					<span class="iconfont icon-a-rilidaka"></span>
					<!-- 打卡按钮 -->
					<button type="button" class="begin">今日打卡</button>
				</div>
			</section>
			<!-- 运动数据与运动徽章区 -->
			<section id="db">
				<!-- 运动数据区 -->
				<div class="data">
					<span class="title3">运动数据</span>
				</div>
				<!-- 运动徽章区 -->
				<div class="badge">
					<span class="title4">累计运动徽章</span> <br />
					<span class="iconfont icon-badge"></span>
					<span class="badgeNum"></span>
					<span class="units">枚</span>
				</div>
			</section>
			<!-- 训练课程区 -->
			<section id="course">
				<p>课程训练</p>
			</section>
			<!-- 户外跑步区 -->
			<section id="outdoorSport">
				<p>户外跑步</p>
			</section>
		</main>

		<!-- 底部导航栏 -->

		<nav class="tabber"></nav>
	</body>
</html>
